<template>
  <div class="container">
    <div class="head-container item">
      <div class="title">打卡管理</div>
      <el-button-group class="checkout-btn-group">
        <el-button class="checkout-btn" @click="queryTableData">
          <i class="el-icon-refresh"></i>
          <span>刷新</span>
        </el-button>
      </el-button-group>
      <div class="search-container">
        <el-input class="query-input"
                  placeholder="请输入姓名"
                  v-model="key"
                  clearable>
        </el-input>
        <el-button class="search-btn">搜索</el-button>
      </div>

    </div>
    <div class="table-container item">
      <el-table
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            prop="name"
            label="姓名"
            width="120">
        </el-table-column>
        <el-table-column
            :show-overflow-tooltip="true"
            prop="currentPosition"
            label="目前位置"
            width="250">
        </el-table-column>
        <el-table-column
            prop="healthState"
            label="健康状况"
            width="80">
        </el-table-column>
        <el-table-column
            prop="bodyTemperature"
            label="体温"
            width="60">
        </el-table-column>
        <el-table-column
            prop="checkOutDate"
            label="打卡时间"
            width="100">
        </el-table-column>
        <el-table-column
            prop="isToHighArea"
            label="过去14天内是否到过高、中风险地区"
            width="250">
        </el-table-column>
        <el-table-column
            prop="isTouch"
            label="是否接触过疑似或者确诊的新型肺炎患者"
            width="280">
        </el-table-column>
        <el-table-column
            :show-overflow-tooltip="true"
            prop="remarks"
            label="备注">
        </el-table-column>
      </el-table>
      <el-pagination
          class="pagination"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="pageSize"
          :page-sizes="[5,10,15]"
          :current-page.sync="pageNum"
          :total="total">
      </el-pagination>
    </div>
  </div>

</template>

<script>

import {getCheckoutList} from "@/api/checkout";
import {formatDate} from "@/utils/date";

export default {
  name: "RecordPage",
  data() {
    return {
      tableData: [],
      pageSize: 5,
      pageNum: 1,
      total: 1,
      key: null
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.pageNum = val;
      this.queryTableData();
    },
    handleSizeChange(val) {
      this.pageNum = 1;
      this.pageSize = val;
      this.queryTableData();
    },
    queryTableData() {
      getCheckoutList(this.pageNum, this.pageSize).then(res => {
        let pageInfo = res.data;
        pageInfo.list.forEach(item => {
          item.checkOutDate = formatDate(new Date(item.checkOutDate), "yyyy-MM-dd")

        })
        this.tableData = pageInfo.list;
        this.total = pageInfo.total;
        this.pageSize = pageInfo.pageSize;
        this.pageNum = pageInfo.pageNum;
      })
    },
  },
  mounted() {
    this.queryTableData();
  }
}
</script>

<style scoped>

.container {
  border-top: 3px solid #3c8dbc;
  border-radius: 3px;
  background-color: white;
  margin-left: 20px;
  margin-right: 20px;
}

.item {
  margin-right: 10px;
  margin-left: 10px;
}

.table-container {
  text-align: center;
}

.checkout-btn-group {

}

.checkout-btn {
  margin-top: 10px;
  margin-bottom: 10px;
}

.title {
  font-size: 20px;
  padding-top: 10px;
}

.pagination {
  padding-top: 20px;
  padding-bottom: 20px;
}

.search-container {
  display: inline-block;
  float: right;
}

.query-input {
  display: inline-block;
  margin-right: 10px;
  width: 180px;
}
</style>
